import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {saveUsdt} from '@/store/action'
import './style.less'
import Header from '@/component/header/header'
import Carousels from '@/component/carousel/carousel'
import Footer from '@/component/footer/footer'
import ExchangeList from '@/component/exchangeList/exchangeList'
import API from '@/api/api'
import banImg1 from '@/static/img/index/i1.png'
import banImg2 from '@/static/img/index/i2.png'
import banImg3 from '@/static/img/index/i3.png'
import banImg4 from '@/static/img/index/i4.png'
import banImg5 from '@/static/img/index/i5.png'
import orderImg from '@/static/img/index/order.png'
import lightImg from '@/static/img/index/light.png'

class Index extends React.Component {
    static propTypes = {
        usdtInfo: PropTypes.object,
        saveUsdt: PropTypes.func,
    }
    // getUSDT = async (props) => {
    //     API.getUSDT().then(res => {
    //         if (res.code == '100200') {
    //             let regEx = /[^\d|^\.|^\-]/g;
    //             for (let i in res.data) {
    //                 res.data[i] = res.data[i].replace(regEx, '') * 1;
    //             }
    //             console.log(typeof(res.data))
    //             this.props.saveUsdt(res.data)
    //             console.log(this.props.usdtInfo)
    //         }
    //     });
    // }
    componentDidMount() {
        this.props.saveUsdt();
    }
    render() {
        return (
            <div className="index">
                <Header title="首页" leftContent="logo"></Header>
                <Carousels></Carousels>
                <div className="index-go">
                    <div className="go-list">
                        <div className="go-block">
                            <img src={banImg1} mode=""></img>
                            <span>充币</span>
                        </div>
                        <div className="go-block">
                            <img src={banImg2} mode=""></img>
                            <span>提币</span>
                        </div>
                        <div className="go-block">
                            <img src={banImg3} mode=""></img>
                            <span>法币</span>
                        </div>
                        <div className="go-block">
                            <img src={banImg4} mode=""></img>
                            <span>矿池</span>
                        </div>
                        <div className="go-block">
                            <img src={banImg5} mode=""></img>
                            <span>公告</span>
                        </div>
                    </div>
                </div>
                <div className="quick-buy">
                    <div className="title">快捷买币</div>
                    <div className="quick-cen">
                        <span>
                            <span className="s-word">参考价：</span>
                            <span className="blue">¥62999.29 CNY/BTC</span>
                        </span>
                        <div className="quick-right">
                            <img src={orderImg}></img>
                            <span>订单</span>
                        </div>
                    </div>
                    <div className="quick-btm">
                        <div className="quick-sel">
                            <div className="left">
                                <span></span>
                            </div>
                        </div>
                        <div className="b-btn">
                            <img src={lightImg}></img>
                            <span>购买</span>
                        </div>
                    </div>
                </div>
                <div className="quotation-title">行情</div>
                <ExchangeList title=''></ExchangeList>
                <Footer></Footer>
            </div>
        )
    }
}
//需要渲染什么数据
const mapStateToProps = (state, ownProps) => {
    return {
        usdtInfo: state.usdtInfo
    }
}
//需要触发什么行为
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        saveUsdt: (usdtInfo) => {
            dispatch(saveUsdt(usdtInfo))
        }
    }
}
//连接组件
export default connect(mapStateToProps, mapDispatchToProps)(Index)

